<template>
  <div>
    <div class="header">
      <span> 运营活动效果</span> <i class="el-icon-warning"></i>
    </div>
    <div ref="myDiv" class="radar-echart"></div>
    <div class="willend">
      <span class="left"
        ><span>周同比12%</span><i class="el-icon-caret-top"></i
      ></span>
      <span class="right"
        ><span>日环比11%</span><i class="el-icon-caret-bottom"></i
      ></span>
    </div>
  </div>
</template>

<script>
//回顾以前如何使用echarts
//1.在html的script中的src里引入echarts.js
//2.挂载的 容器，并且给id
//3.实例化一个echarts实例  let echart = echarts.init(document.getElementById(id))
//4.绘制（给配置  echarts.setOption(配置)）

import * as Echarts from "echarts";
import Radartree from "./radartree";
export default {
  name: "Radartree",
  mounted() {
    this.echarts = Echarts.init(this.$refs.myDiv);
    this.echarts.setOption(Radartree);
  },
};
</script>

<style lang="scss" scoped>
.radar-echart {
  width: 275px;
  height: 200px;
}
.header {
  position: relative;
  span {
    color: #97a8be;
    font-size: 14px;
  }
  .el-icon-warning {
    position: absolute;
    right: 1px;
    color: #97a8be;
    padding: 3px 0;
  }
}
.willend {
  width: 275px;
  border-top: 1px solid #97a8be;
  color: #303133;
  .left {
    padding-right: 30px;
  }
  .el-icon-caret-top {
    color: red;
  }
  .el-icon-caret-bottom {
    color: green;
  }
}
</style>
